<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../css/toggle.css">
  <link rel="stylesheet" href="../css/style.css">
  <script src="../js/jquery.min.js"></script>
  <script src="../js/juicer.js"></script>
  <style>
    .action {
      background-color: #3a9cc8!important;
      color: white!important;
    }
  </style>
</head>

<body>
  <div id="wrapper">
    <!--   Sidebar -->
    <div id='aside'>
      <%include ./common/aside.ejs%>
    </div>
    <!--   contens -->
    <div class="upload">
      <!-- header -->
      <div id='header'>
        <%include ./common/headerSearch.ejs%>
      </div>
      <!-- shadow -->
      <div class="items-shodow" style="display:none">
      </div>
      <!-- midd contents -->
      <div class="searchSick container-fluid">
        <div class="row characterList">
          <div class="col-xs-12" id="hi">
            <table class="table">
              <% docs.list.forEach(function(key,index){ %>
                <tr>
                  <td class="character_list">
                    <%= (docs.pages-1)*10+index+1%>
                  </td>
                  <td class="idItem">
                    <%= key.data[0]%>
                  </td>
                  <td class="hidden">
                    <%= key.id%>
                  </td>
                  <td class="detail"><a>详情</a></td>
                </tr>
                <% }) %>
            </table>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <nav aria-label="Page" class="pull-right">
              <ul class="pagination" id="pagination">
                <li>
                  <a href="#" aria-label="Previous">
                   <span aria-hidden="true"><</span>
                 </a>
                </li>
                <li><a class="action" href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                  <a href="#" aria-label="Next">
                   <span aria-hidden="true">></span>
                    </a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>

      <!-- footer -->
      <div id='footer'>
        <%include ./common/footer.ejs%>
      </div>
    </div>
  </div>
  <script src="../js/bootstrap.min.js"></script>
  <script type="text/javascript">
    var search = {
      init: function() {
        var search_value = $("#search_value").val();
        if (search_value) {
          // console.log(1);
        } else {
          search_value = '高血压'
        }
        $.get('http://localhost:3000/search', {
          input: search_value
        }, function(data, status) {
          $('#hi').html(data);
          // console.log(window.location.href);
          $("#hi .detail").on('click', function() {
            // console.log($('#back'));
            $('#back').addClass('back');
            var id = $(this).prev('.hidden').text().trim();
            $.get('http://localhost:3000/id_table', {
              id: id
            }, function(datas) {
              $('#hi').html(datas);
            })
          })
        });
      }
    }
    // TODO: 返回按钮开始---------
    $('#back').on('click', function() {
      if ($('#back').is('.back')) {
        search.init();
        $('#back').removeClass('back');
      } else {
        window.history.go(-1);
      }
    });
    // TODO: -------返回按钮结束---------

    //TODO:-------搜索按钮开始-------
    $('#btn').on('click', function() {
      $('#Prompt').css({
        'display': 'none'
      });
      search.init();
    })
    //TODO:-------搜索按钮结束-------

    //TODO:-------详情按钮开始-------
    $("#hi .detail").on('click', function() {
      var id = $(this).prev('.hidden').text().trim();

      $.get('http://localhost:3000/id_table', {
        id: id
      }, function(datas) {
        // $("#back").attr("href", "http://localhost:3000/search?input=" + encodeURI(search_value))
        $('#hi').html(datas);

      })
    })
    //TODO:-------详情按钮结束-------

    //TODO:-------分页按钮开始-------
    $('#pagination li').on('click', function() {
      $(this).children().addClass('action');
      $(this).siblings().children().removeClass('action');
      var search_value = $("#search_value").val();
      if (search_value) {} else {
        search_value = '高血压'
      }
      var page = parseInt($(this).text());

      if (isNaN(page)) {
        //不是数字
        if ($(this).children().attr('aria-label') == 'Previous') {
          page = parseInt($(".action").text()) - 1;
          // console.log($(".action"));
        } else {
          page = parseInt($(".action").text()) + 1;
        }
      }
      $.get('http://localhost:3000/search', {
        page: page,
        input: search_value
      }, function(data, status) {
        $('#hi').html(data);
        $("#hi .detail").on('click', function() {
          $('#back').addClass('back');
          var id = $(this).prev('.hidden').text().trim();
          $.get('http://localhost:3000/id_table', {
            id: id
          }, function(datas) {
            $('#hi').html(datas);
          })
        })
      });
    })
    //TODO:-------分页按钮结束-------

    //TODO:-------提示框开始-------
    var clear = function() {
      $("#Prompt").empty().hide();
    };
    var show = function() {
      $("#Prompt").empty().show();
    };
    // //注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
    $("#search_value").blur(function() {
      setTimeout(clear, 500);
      $('#search_value').css('border', 'solid 1px #3a9cc8');
    });
    // //注册事件，当输入框获得焦点的时候显示下拉列表
    $("#search_value").focus(function() {
      setTimeout(show, 500);
      $('#search_value').css('border', 'solid 1px #ddd');
      $('#Prompt').css('border-bottom', 'none');
    });
    $(function() {
      $("#search_value").bind('input porpertychange', function() {
        $("#search_value").attr('autocomplete', 'off');
        var character = $("#search_value").val();
        $.get('http://localhost:3000/search/character', {
          character: character
        }, function(data, status) {
          console.log(character);
          $('#Prompt').html(data);
          $('#Prompt li').on('click', function() {
            $("#search_value").val($(this).text().trim());
          })
        })
      });
    });
  </script>
</body>

</html>
